<template>
  <div>
    <div class="top">
      <i class="el-icon-upload2"></i
      ><a href="javascript:;" class="top" @click="backtExam">回到上级</a>
    </div>
    <el-row class="demo-autocomplete">
      <el-input placeholder="请输入内容" v-model="inputVal" clearable>
      </el-input>
      <el-button type="primary" @click="search">查找</el-button>
      <el-button type="primary" @click="restart">重置</el-button>
    </el-row>

    <el-table
      :data="students"
      style="width: 100%"
      :row-class-name="tableRowClassName"
    >
      <el-table-column prop="uid" label="Id" align="center" width="100" fixed>
      </el-table-column>
      <el-table-column
        prop="username"
        label="用户名"
        align="center"
        width="100"
        fixed
      >
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        align="center"
        width="100"
        fixed
      >
      </el-table-column>
      <el-table-column prop="openingTime" align="center" label="开考时间">
      </el-table-column>
      <el-table-column prop="handInTime" align="center" label="交卷时间">
      </el-table-column>
      <el-table-column
        prop="duration"
        align="center"
        label="考试时长(分钟)"
        width="100"
      >
      </el-table-column>
      <el-table-column
        prop="exceptionNumber"
        label="异常次数(系统监测)"
        width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="state"
        align="center"
        fixed="right"
        label="考试状态"
      >
      </el-table-column>

      <el-table-column label="操作" fixed="right" width="220">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handlePrompt(scope.$index, scope.row)"
            type="success"
            >提示</el-button
          >
          <el-button
            size="mini"
            type="warning"
            @click="handleInvigilate(scope.$index, scope.row)"
            >监考</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleEndExam(scope.$index, scope.row)"
            >收卷</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      title="提示"
      :visible.sync="centerDialogVisible"
      width="30%"
      center
    >
      <span>亲爱的{{ dialogData.name }}同学：</span>
      <el-input
        type="textarea"
        :rows="10"
        placeholder="请输入内容"
        v-model="dialogData.textarea"
      >
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="postPrompt">发 送 提 示</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import {setState} from "../../api/data";
export default {
  data() {
    return {
      students: [],
      inputVal: "",
      centerDialogVisible: false,
      dialogData: { textarea: "" },
      tableData: [],
    };
  },
  mounted() {
    this.getStudents();
    console.log(this.$route.query.examId);
  },
  methods: {
    getStudents() {
      axios.get("http://42.193.219.14:8080/getInvigilate",{
          headers: {
                "Content-Type": "application/json",
                "Authorization": "Bearer " + sessionStorage.getItem('token')
              },
          params: { examId: this.$route.query.examId }
        })
        .then((data) => {
          this.students = data.data.data;
          console.log(this.students);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    backtExam() {
      this.$router.push({
        name: "examMessage",
      });
    },
    search() {
      if (this.inputVal) {
        this.tableDataCp = this.tableData;
        this.tableData = this.tableData.filter((el) => {
          return el.name == this.inputVal;
        });
      }
    },
    restart() {
      if (this.tableDataCp) {
        this.tableData = this.tableDataCp;
      }
    },
    tableRowClassName({ row, rowIndex }) {
      if (row.state == "正在考试") {
        return "Examing-row";
      } else if (row.state == "已交卷") {
        return "Exam-row";
      }
      return "";
    },
    //提示
    handlePrompt(a, b) {
      this.centerDialogVisible = true;
      Object.assign(this.dialogData, b); //对象的拷贝   Array.from:伪数组转为真数组
    },
    //监考
    handleInvigilate(index, { uid, name, state }) {
      if (state != "待考"&&state!="已交卷") {
        this.$router.push({
          name: "litterInvigilate",
          query: {
            name,
            uid,
            examId:this.$route.query.examId
          },
        });
      } else {
        this.$message({
          type: "info",
          message: "已结束考试或未开始考试,无效操作",
        });
      }
    },
    //收卷
    handleEndExam(a, b) {
      if (b.state == "已交卷") {
        this.$message({
          type: "info",
          message: "考试已结束！无效操作",
        });
        return;
      } else {
        this.$message({
          type: "success",
          message: "已结束考试",
        });
        this.postState(b.uid,3);
      }
    },
    //确定发送提示
    postPrompt() {
      //只有提示的时候有参数tip
      this.centerDialogVisible = false;
      this.postState(this.dialogData.uid, 1, this.dialogData.textarea);
      console.log(this.dialogData.textarea)
    },
    //发送post请求获取监考状态
    postState(uid , stateVal, tip) {
      axios({
        method: "POST",
        url: "http://42.193.219.14:8080/setState",
        headers: {
                "Content-Type": "application/json",
                "Authorization": "Bearer " + sessionStorage.getItem('token')
              },
        data: {
          examId: this.$route.query.examId,
          uid,
          state: stateVal,
          tip: tip || undefined, //只有提示的时候有参数tip
        },
      })
        .then((data) => {
          console.log(data);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // gettime(openingTime) {
    //   let start = new Date(openingTime);
    //   let time = new Date();
    //   let year = time.getFullYear();
    //   let mouth = time.getMonth() + 1;
    //   let data = time.getDate();
    //   let HH = time.getHours();
    //   let MM = time.getMinutes();
    //   let duration = (time.getTime() - start.getTime()) / 1000 / 60;
    //   return {
    //     handInTime: year + "-" + mouth + "-" + data + " " + HH + ":" + MM,
    //     duration: parseInt(duration),
    //   };
    // },
  },
};
</script>

<style>
.top {
  color: rgb(33, 0, 245);
}
.el-input {
  width: 20%;
}
.el-row {
  margin: 20px 0px;
}
.el-table .Examing-row {
  background: rgb(255, 210, 178);
}

.el-table .Exam-row {
  background: #cdf1b9;
}
</style>
